<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '../stores/user';
import { useCookies } from '@vueuse/integrations/useCookies';
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

//从用户的数据单元获取用户对象
const user=useUserStore()
const u= user.getUserx
//退出
let tuic=()=>{
    //弹出确认提示框
    //清空用户编号
    const cookies=useCookies()
    cookies.remove('token')
    //跳转到登录页面
    const store=useRouter()
    router.push('/login')
}
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <!-- <img
        style="width: 60px"
        :src="'/src/assets/img/'+u.picture "
        alt="Element logo"
      /> -->举世无双
    </el-menu-item>
    <el-menu-item index="1">欢迎{{u.userName}}</el-menu-item>
    <el-sub-menu index="2">
      <template #title>系统管理</template>
      <el-menu-item index="2-1">修改密码</el-menu-item>
      <el-menu-item index="2-2">查看个人信息</el-menu-item>
      <el-menu-item index="2-3"@click="tuic">退出系统</el-menu-item>
      <!-- <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu> -->
    </el-sub-menu>
  </el-menu>
</template>
<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>